<template>
    <div class="app-container">
        <el-form class="formList" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
            label-width="80px">
            <el-row>



                <el-form-item label="项目类型" prop="shopType">
                    <el-select v-model="queryParams.shopType" placeholder="请选择项目类型" clearable size="small">
                        <el-option v-for="dict in itemTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>

                <el-form-item label="活动类型" prop="activityType">
                    <el-select v-model="queryParams.activityType" placeholder="请选择活动类型" clearable size="small">
                        <el-option v-for="dict in storeInFoOptions" :key="dict.name" :label="dict.name"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>

                <el-form-item style="margin-left: 22px;">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>

            </el-row>
        </el-form>

        <el-row class="row-mbinfo" style="margin-left: 0px; margin-right: 0px;">



            <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                v-hasPermi="['proBoxService:item:add']">新增</el-button> -->


            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <div class="divTable">
            <el-table border v-loading="loading" :data="unitList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="商品类型" align="center" prop="shopTypeStr" />
                <el-table-column label="商品名称" align="center" prop="shopName" width="240px">
                    <template slot-scope="scope">
                        <a style="color: #1890ff;" @click="handledetail(scope.row)">{{ scope.row.shopName }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column label="活动类型" align="center" prop="activityTypeStr" />
                <el-table-column label="活动时间" align="center" prop="time" width="260px">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.startTime, '{y}年{m}月{d}日') }}-
                            {{ parseTime(scope.row.endTime, '{y}年{m}月{d}日') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="库存" align="center" prop="activityStock" />
                <el-table-column label="销量" align="center" prop="activitySaleAmount" />

                <el-table-column label="创建时间" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" align="center" prop="createName" />


                <el-table-column label="状态" align="center" prop="dataStatus">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.dataStatus" active-value="1" inactive-value="0"
                            @change="handlerecommendChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>


                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleSDetail(scope.row)">查看
                        </el-button>
                        <el-button size="mini" type="text" v-if="scope.row.dataStatus == 0" icon="el-icon-edit"
                            @click="handleUpdate(scope.row)" v-hasPermi="['proBoxService:activity:edit']">修改</el-button>
                        <el-button size="mini" type="text" v-if="scope.row.auditStatus == 0" icon="el-icon-delete-solid"
                            @click="handlDelChange(scope.row)" v-hasPermi="['proBoxService:activity:del']">删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>









    </div>
</template>

<script>


import {
    listProboxServiceActivity, getActivityVoById
    , addActivity, editActivity, delActivity,
    updateActivityStatus
} from "@/api/service/activity"
import {
    listProboxServiceItem, updateStatus, updateRecommend, listStoreByItemId, isSaveByList, isSaveDeviceByList, listDeviceByItemId,
    addOrUpdateCompose, listComposeByItemId
} from "@/api/service/item"
import selected from "@/components/Activity/SelectedStore";
import commodityStore from "@/components/Activity/commodityStore";

import selectedDevice from "@/components/Activity/SelectedDevice";
import commodityDevice from "@/components/Activity/commodityDevice";

import selectedItem from "@/components/Activity/SelectedItem";
import commodityItem from "@/components/Activity/commodityItem";

export default {
    name: "item",
    components: { selected, commodityStore, selectedDevice, commodityDevice, selectedItem, commodityItem, },
    data() {
        return {
            storeItemId: null,
            storeOpen: false,
            selectedData: [],
            viewOpen: false,
            deviceItemId: null,
            deviceOpen: false,
            selectedDataDevice: [],
            viewOpenDevice: false,
            serviceItemId: null,
            itemOpen: false,
            selectedDataitem: [],
            selectedDataItem: [],
            viewOpenItem: false,
            // 遮罩层
            activeClass: -1,
            loading: true,
            // 选中数组
            ids: [],
            //选中数组的名字
            names: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商品单位表格数据
            unitList: [],
            // 弹出层标题
            title: "",
            //查看详细标题
            viewTitle: "",
            // 是否显示弹出层
            open: false,
            //是否显示查看详细弹出层
            viewOpen: false,
            //常用状态数据字典
            statusOptions: [],
            //项目类型
            itemTypeOptions: [],
            //门店列表
            storeInFoOptions: [
                { name: '秒杀', value: 'seckill' },
                { name: '限时购', value: 'limittime' },
                { name: '新人购', value: 'new' }
            ],
            //查看详细数据
            showData: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                activityType: null,
                shopType: null,

            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                unitName: [{
                    required: true,
                    message: "单位名称不能为空",
                    trigger: "blur"
                }],
                dataPriority: [{
                    required: true,
                    message: "排序不能为空",
                    trigger: "blur"
                }],
            },

            qf: [],
        };
    },
    created() {
        this.getList();
        this.getDicts("activity_card_type").then(response => {
            this.itemTypeOptions = response.data;
        });

    },
    methods: {

        handledetail(row) {
            const shopId = row.shopId
            if (row.shopType == 'service') {
                this.$router.push("/item/detail/" + shopId);
            } else if (row.shopType == 'coupon') {
                let couponType = row.couponType;
                if (couponType && couponType == '1') {
                    this.$router.push("/FullReduction/view/" + shopId)
                } else if (couponType && couponType == '2') {
                    this.$router.push("/Discount/view/" + shopId)
                } else if (couponType && couponType == '3') {
                    this.$router.push("/ExchangeCoins/view/" + shopId)
                } else if (couponType && couponType == '4') {
                    this.$router.push("/ExchangeCertificate/view/" + shopId)
                }

            } else {

            }
        },
        submitForms() {

            let qf = [];
            this.selectedData.forEach(vo => {
                qf.push(vo.storeUid);
            })

            isSaveByList(qf, this.storeItemId).then(response => {
                this.msgSuccess("修改成功");
                this.viewOpen = false;
                this.getList();
            });
        },
        multipleSelection(data) {
            this.storeOpen = false
            this.selectedData = data;
            this.$nextTick(() => {
                this.$refs.child.getList();
            });
        },
        toCloseBox() {
            this.storeOpen = false;
        },
        selectCommodity() {
            this.$forceUpdate()
            this.storeOpen = true;
            this.$nextTick(() => {
                this.$refs["selTable"].greet(this.selectedData);
            });
        },
        cancels() {
            this.viewOpen = false;
        },
        hahas() {
            this.selectedData = [];
        },
        addStore(rows) {
            this.storeItemId = rows.itemId;
            listStoreByItemId(rows.itemId).then(response => {
                this.selectedData = response.data;
                this.viewOpen = true;
            });
        },
        handleQueryStatus(status) {
            this.activeClass = status;
            if (status == '-1') {
                this.queryParams.auditStatus = null;
            } else {
                this.queryParams.auditStatus = status;

            }
            this.queryParams.pageNum = 1;
            this.getList();
        },
        statusFormat(status) {
            let showStatus = "";
            if (status == "1") {
                showStatus = "销售中";
            } else {
                showStatus = "已下架"
            }
            return showStatus;
        },
        handlerecommendChange(row) {
            let text = row.dataStatus === "0" ? "无效" : "有效";
            this.$confirm('确定要把商品名称为"' + row.shopName + '"设为' + text + '吗？', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                let data = {
                    'activityId': row.activityId,
                    'dataStatus': row.dataStatus
                }
                return updateActivityStatus(data);
            }).then(() => {
                this.msgSuccess("操作成功");
                this.getList();
            }).catch(function () {
                row.dataStatus = row.dataStatus === "0" ? "1" : "0";
            });
        },
        handlDelChange(row) {
            this.$confirm('确定要把商品名称为"' + row.shopName + '"删除吗？', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                let arr = [];
                arr.push(row.activityId)
                return delActivity(arr);
            }).then(() => {
                this.msgSuccess("操作成功");
                this.getList();
            }).catch(function () {

            });
        },
        getList() {
            this.loading = true;
            listProboxServiceActivity(this.queryParams).then(response => {
                this.unitList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                unitUid: null,
                unitName: null,
                dataStatus: "1",
                dataPriority: 10,
                createUid: null,
                createTime: null,
                updateUid: null,
                updateTime: null,
                platformUid: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.unitUid)
            this.names = selection.map(item => item.unitName)
            this.single = selection.length !== 1
            this.multiple = !selection.length
            //用于禁用删除
            if (this.multiple == false) {
                for (var i = 0; i < selection.length; i++) {
                    var element = selection[i];
                    if ("1" === element.dataStatus) {
                        this.multiple = true;
                        break;
                    }
                }
            }
        },

        pf(row, status) {
            let text = status === "0" ? "下架" : "上架";

            this.$confirm('确定要把项目名称为"' + row.itemName + '"设为' + text + '吗？', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return updateStatus(row.itemId, status);
            }).then(() => {
                this.msgSuccess("操作成功");
                this.getList();
            }).catch(function () {
                row.auditStatus = row.auditStatus === "0" ? "1" : "0";
            });
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.$router.push("/serviceActivity/data/");
        },

        handCloseDetail() {
            this.viewOpen = false
            this.showData = []
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push("/serviceActivity/editData/" + row.activityId);
        },
        handleSDetail(row) {
            this.$router.push("/serviceActivity/detail/" + row.activityId);
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.unitUid != null) {
                        updateUnit(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addUnit(this.form).then(response => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const unitUids = row.unitUid || this.ids;
            const names = row.unitName || this.names;
            this.$confirm('是否确认删除商品单位名称为"' + names + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delUnit(unitUids);
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('product/unit/export', {
                ...this.queryParams
            }, `product_unit.xlsx`)
        }
    }
};
</script>
